<template>
  <!-- 部门故障分布 -->
  <div class="count-request-box" v-loading="loading">
    <div style="margin-top: 10px">
      <el-date-picker
        v-model="dateArr"
        type="daterange"
        range-separator="到"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
      />
    </div>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="12" :lg="lg" :xl="xl" v-for="(item, index) in list" :key="index">
        <div class="item">
          <div class="num">{{ item.requetDto.length }}</div>
          <div class="txt">{{ item.name }}</div>
        </div>
      </el-col>
      <el-col :span="24" v-if="list.length == 0">
        <div class="no-data">暂无数据</div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="DepartmentalFaultDistributionBox">
import { ref, onMounted, watch } from "vue";
import { findOrgNameCount } from "@/api/modules/index";
import { useRouter } from "vue-router";

const router = useRouter();

const dateArr = ref<any>([]);
const list = ref<any[]>([]);
const loading = ref(false);
const lg = ref(8);
const xl = ref(6);

const getData = () => {
  loading.value = true;
  findOrgNameCount({
    start: dateArr.value[0] + " 00:00:00",
    over: dateArr.value[1] + " 23:59:59"
  })
    .then((res: any) => {
      loading.value = false;
      list.value = res.filter(item => {
        return item.requetDto.length;
      });
    })
    .catch(() => {
      list.value = [];
      loading.value = false;
    });
};

watch(
  () => dateArr.value,
  val => {
    getData();
  }
);

onMounted(() => {
  let myDate = new Date();
  let year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
  let month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
  let month_text = "";
  month_text = month > 9 ? "" + month : "0" + month;
  let day = myDate.getDate(); //获取当前日(1-31)
  let day_text = "";
  day_text = day > 9 ? "" + day : "0" + day;
  dateArr.value = [year + "-01-01", [year, month_text, day_text].join("-")];
});
</script>

<style scoped lang="scss">
.count-request-box {
  box-sizing: border-box;
  width: 100%;
  padding: 0 10px 10px;
  .item {
    box-sizing: border-box;
    padding: 15px 0 18px;
    margin-top: 10px;
    text-align: center;
    background-color: var(--el-menu-active-bg-color);
    background-size: 100% 100%;
    border-radius: 10px;
    transition: all 0.3s;
  }
  .num {
    font-size: 20px;
    font-weight: bold;
    color: $primary-color;
  }
  .txt {
    margin-top: 5px;
    font-size: 14px;
  }
  .no-data {
    margin-top: 10px;
    font-size: 14px;
    color: #999999;
  }
}
</style>
